
<script>
import { createVNode } from 'vue'

// 这是没有jsx 的写法

// 组件除了使用template  还可以使用render函数
// 虚拟dom: 模拟真实dom的 js对象
// createVNode   =>  创建虚拟dom的
// createVNode(标签名或组件名, {属性名: 属性值}, 节点)
// createVNode(标签名或组件名, {属性名: 属性值}, [子节点1, 子节点2])
export default {
  name: 'XtxHello',
  render () {
    // return createVNode(标签名, { 属性名: 属性值 }, 子节点)
    // return createVNode(标签名, { 属性名: 属性值 }, [子节点1, 子节点2])
    // return createVNode('div', { id: 'box' }, ['h1', { id: 'h1' }, 'h2', { id: 'w' }])
    return createVNode('div', { id: 'box', class: 'red' }, [
      createVNode('h1', { id: 'h1box' }, '大标题'),
      createVNode('h2', { id: 'h2box' }, '大标题2')
    ])
  }

}
</script>

<style>
</style>
